<template>
	<view class="title">
		<image :src="data.IP+data.touxiang" mode="" @click="tiao('../edit_message/edit_message')"></image>
		<view class="">
			<view><text>{{data.name}}</text><text>{{data.post_name}}</text></view> 
			<view>{{data.departmet}}</view>
		</view>
		<text class="footer iconfont icon-xiangyou1" @click="tiao('../profile/profile')"></text>
	</view>
	<view class="content">
		<view>
			<text style="background: -webkit-linear-gradient(right top, rgb(129,187,247), rgb(82,169,253));"></text>
			<text>我的消息</text>
			<text :class="{none:data.msgShow}">{{data.myMsg}}</text>
			<text class="footer iconfont icon-xiangyou1" @click="tiao('../message/message')"></text>
		</view>
		<view>
			<text style="background: -webkit-linear-gradient(right top, rgb(206,182,255), rgb(173,134,255));"></text>
			<text>我的考勤</text>
			<text :class="{none:data.show}">0</text>
			<text class="footer iconfont icon-xiangyou1" @click="tiao('../attendance/attendance')"></text>
		</view>
		<view>
			<text style="background: -webkit-linear-gradient(right top, rgb(255,159,159), rgb(255,202,202));"></text>
			<text>我的申请</text>
			<text :class="{none:data.applyShow}">{{data.myApply}}</text>
			<text class="footer iconfont icon-xiangyou1" @click="tiao('../application/application')"></text>
		</view>
		<view>
			<text style="background: -webkit-linear-gradient(right top, rgb(179,204,255), rgb(109,157,255));"></text>
			<text>我的会议</text>
			<!-- :class="{none:data.show}" -->
			<text :class="{none:data.huiyiShow}">{{data.myHuiyi}}</text>
			<text class="footer iconfont icon-xiangyou1" @click="tiao('../meeting/meeting')"></text>
		</view>
	</view>
	<view class="content">
		<view>
			<text style="background: -webkit-linear-gradient(right top, rgb(186,238,166), rgb(151,227,119));"></text>
			<text>设置</text>
			<text style="display: none;">2</text>
			<text class="footer iconfont icon-xiangyou1" @click="tiao('../set/set')"></text>
		</view>
		<view>
			<text style="background: -webkit-linear-gradient(right top, rgb(124,195,255), rgb(91,209,255));"></text>
			<text>关于</text>
			<text style="display: none;">2</text>
			<text class="footer iconfont icon-xiangyou1" @click="tiao('../about/about')"></text>
		</view>
	</view>
</template>

<script>
	 import {ref,computed,reactive,toRefs} from 'vue';
	 import {useStore} from 'vuex'
	 import {mapState} from 'vuex';
	 import http from '../../utils/http.js';
	 import store from '../../store/index.js';
	export default {
		setup(){
			const {state,commit,dispatch,getters} = useStore();
			let data=reactive(
			{
				show:true,
				myMsg:0,
				myApply:0,
				myHuiyi:0,
				account:'200002',
				touxiang:"",
				name:'',
				departmet:'',
				post_name:'',
				msgShow:true,
				applyShow:true,
				huiyiShow:true,
				IP:computed(()=>state.IP),
			}
			)
			return {data}
		},
		// data() {
		// 	return {
		// 		show:'false'
		// 	}
		// },
		methods: {
			tiao:function(src){
				uni.navigateTo({
					url: src
				});
			},
		},
		// onShow(){
		// 	// console.log(store.state.data.a)
		// 	console.log(store.state.a)
		// 	console.log(store.state.wuxiaoyuan.a)
		// 	console.log(store.getters)
		// 	store.commit('wuxiaoyuan/add',500)
		// 	console.log(store.state.wuxiaoyuan.a)
		// 	// console.log(mapState)
		// },
		// computed:mapState('wuxiaoyuan',['a','b'])
		// computed:mapState({
		// 	a:state=>state.data.a,
		// 	b:state=>state.data.b
		// })
		onShow(){
			this.data.account=store.state.liujinchang.user.work_id;
			this.data.name=store.state.liujinchang.user.name;
			this.data.departmet=store.state.liujinchang.user.department_name;
			this.data.post_name=store.state.liujinchang.user.post_name;
			this.data.touxiang='/images/'+store.state.liujinchang.user.figure;
			http({
			    url: "/home/get_shenpi",
			    // method: "get",
			    data: {
			        account:store.state.liujinchang.user.account,
			        // account:'100002',
			    } 
			    }).then((res) => {
					this.data.myMsg=0
					console.log(res.data.data)
					res.data.data.forEach((item)=>{
						if(item.state=='待审核'){
							this.data.myMsg++
						}
					})
					if(this.data.myMsg!=0){
						this.data.msgShow=false
					}
				});
				http({
				    url: "/home/get_shenqing",
				    method: "get",
				    data: {
				        account:this.data.account,
				    }
				    }).then((res) => {
						console.log("shenqing",res.data.data[0].shenqin)
						this.data.myApply=res.data.data[0].shenqin
						if(this.data.myApply!=0){
							this.data.applyShow=false
						}
					});
				http({
				    url: "/home/get_huiyijilu",
				    method: "get",
				    data: {
				        account:this.data.account,
				    }
				    }).then((res) => {
						console.log("huiyi",res.data.data[0].huiyi)
						this.data.myHuiyi=res.data.data[0].huiyi
						if(this.data.myHuiyi!=0){
							this.data.huiyiShow=false
						}
					});
		}
	}
</script>

<style lang="less">
	@import url("~@/static/font/iconfont.css");
page{
	background-color: rgb(242,242,242);
	// padding: 24rpx 35rpx;
	box-sizing: border-box;
}
view{
	border-radius: 10rpx;
	box-sizing: border-box;
}
.title{
	background-color: #FFFFFF;
	padding: 40rpx;
	display: flex;
	align-items: center;
	image{
		width: 150rpx;
		height: 150rpx;
		margin-right: 30rpx;
		border-radius: 75rpx;
	}
	view{
		color: #999;
		margin-top: 15rpx;
		view:first-child{
			margin-top: -15rpx;
		}
	}
	text:first-child{
		font-size: 34rpx;
		color: #000000;
	}
	text:last-child{
		margin-left: 20rpx;
	}
	.footer{
		position: absolute;
		right: 40rpx;
	}
}
.content{
	padding: 20rpx 20rpx 0 20rpx;
	view{
		background: #FFFFFF;
		padding: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1px solid rgb(242,242,242);
		text{
			display: inline-block;
		}
		text:first-child{
			height: 40rpx;
			width: 40rpx;
			border-radius: 20rpx;
		}
		text:nth-child(2){
			height: 40rpx;
			line-height: 40rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
		}
		text:nth-child(3){
			height: 32rpx;
			width: 32rpx;
			background: red;
			border-radius: 16rpx;
			font-size: 20rpx;
			text-align: center;
			color: #FFFFFF;
			margin-left: 10rpx;
			font-weight: 800;
		}
		text:last-child{
			position: absolute;
			right: 20rpx;
		}
	}
}
.none{
	display: none !important;
}
.inline-block{
	display: inline-block;
}
</style>
